<script setup>
	//搜索组件
	import { ref, getCurrentInstance, computed, watch } from 'vue';
	const { proxy } = getCurrentInstance();
	const emit = defineEmits(['search', 'reset', 'closeTagData']);
	const props = defineProps({
		//表单数据
		form: {
			type: Object,
			default: () => {
				return {};
			},
		},
		//表单配置
		schema: {
			type: Object,
			default: () => {
				return {};
			},
		},

		//背景类型dark 黑色，white白色
		bgType: {
			type: String,
			default: 'dark'
		}
	});

	//计算搜索框的高度
	const height = computed(() => {
		let height = 0;
		if (!isMore.value) {
			height = 70;
		} else {
			const rowNum = Math.ceil(searchLenth.value / 3); //计算有多少列
			height = 50 + 50 * rowNum;
		}
		return height;
	});

	const formData = ref(props.form); //表单数据
	const schemaData = ref({}); //搜索配置
	const slotList = ref([]); //自定义插槽集合
	const isMore = ref(false); //更多搜索条件显示隐藏
	const tagData = ref([]); //已选的筛选条件
	const searchLenth = ref(0); //搜索条件个数

	//自定义按钮
	const slotData = ref({
		btn: {
			colProps: {
				md: 6,
			},
			slots: {
				customRender: 'btn',
			},
		},
	});

	//监听搜索框的值
	watch(() => formData.value, (newVal) => {
		setTagData() //处理已经填筛选条件
	}, { deep: true })

	//对搜索条件配置进行处理，第一行每行固定显示3个条件
	function schemaDataFun(type, isFrist) {
		Object.keys(props.schema).forEach((key, index) => {
			if (props.schema[key].props) props.schema[key].props.allowClear = true //添加清空按钮
			if (index < 3) {
				//默认显示的搜索条件
				schemaData.value[key] = props.schema[key];
			} else {
				if (index == 3) {
					schemaData.value.btn = {}; //如果搜索条件大于3个时， 在第4位添加占位插槽，给按钮使用
				}
				schemaData.value[key] = props.schema[key];
				schemaData.value[key].hidden = type == 'default' ? true : false; //搜索条件的显示隐藏
			}

			if (props.schema[key].slots) {
				//获取自定义插槽集合
				if (isFrist) slotList.value.push(props.schema[key].slots.customRender);
			}
			searchLenth.value = index + 1; //搜索条件个数
		});

		Object.assign(schemaData.value, slotData.value); //合并自定义按钮
	}
	schemaDataFun('default', true); //初始化搜索配置

	//查看更多搜索条件
	function moreClick() {
		isMore.value = !isMore.value;
		if (isMore.value) {
			schemaDataFun('more'); //显示全部搜索条件
		} else {
			schemaDataFun('default'); // 显示默认搜索条件
		}
	}

	//搜索
	function search() {
		emit('search'); //通知父组件
		if (isMore.value) moreClick(); // 显示默认搜索条件
	}

	//设置已选的筛选条件
	function setTagData() {
		tagData.value = [];
		for (let key in formData.value) {
			if (!Array.isArray(formData.value[key]) && formData.value[key] && schemaData.value[key] || Array.isArray(formData.value[key]) && formData.value[key].length > 0) {
				let formDataValue = ''
				if (schemaData.value[key]?.type == 'select') {
					//如果是下拉选择的时候-找出值对应的label
					let activeValue = []
					if (Array.isArray(formData.value[key])) {
						//多选
						let activeValue2 = []
						formData.value[key].forEach(item => {
							activeValue2 = [] = schemaData.value[key].props.options.filter(item2 => {
								return item2.value == item
							})
							activeValue = [...activeValue, ...activeValue2]
						})
					} else {
						activeValue = schemaData.value[key].props.options.filter(item => {
							return item.value == formData.value[key]
						})
					}
					if (activeValue.length > 0) {
						let formDataValueList = []
						activeValue.forEach(item => {
							formDataValueList.push(item.label)
						})
						formDataValue = formDataValueList?.join(',')
					}
				} else if (schemaData.value[key]?.slots) {
					//自定义插槽
					formDataValue = schemaData.value[key]?.showLabel
				} else {
					formDataValue = formData.value[key]
				}

				let formDataItem = {
					lable: schemaData.value[key]?.label,
					value: formDataValue,
					key: key,
					slots: schemaData.value[key]?.slots
				};

				// schemaData.value[key].props?.range === true 时间区间选择， 需两个都有值
				if (!schemaData.value[key]?.props?.range || (schemaData.value[key]?.props?.range && formData.value[key][0] && formData.value[key][1])) {
					tagData.value.push(formDataItem);
				}
			}
		}
	}

	//重置按钮
	function reset() {
		Object.keys(schemaData.value).forEach(key => {
			//清空表单的搜索值
			if (Array.isArray(formData.value[key])) {
				formData.value[key] = [];
			} else {
				formData.value[key] = '';
			}
		})
		emit('reset'); //通知父组件
		search();
	}

	//删除搜索条件
	function handleClose(tag, index) {
		if (Array.isArray(formData.value[tag.key])) {
			formData.value[tag.key] = [];
		} else {
			formData.value[tag.key] = '';
		}
		tagData.value.splice(0, 1);
		search();
		emit('closeTagData', tag); //通知父组件
	}
</script>
<template>
	<div v-if="JSON.stringify(props.schema) !== '{}'">
		<div class="search-box">
			<div class="serch-from flex align-start" :class="`${isMore ? 'shadow' : ''} ${bgType === 'dark' ? 'text-white search-dark' : 'bg-white search-white'}`">
				<div class="flex-sub">
					<lay-json-schema-form :model="formData" :schema="schemaData">
						<!-- 自定义插槽 -->
						<template #[item] v-for="(item, index) in slotList" :key="index">
							<slot :name="item" :row="item" />
						</template>

						<template #btn>
							<div class="padding-left-xl flex align-center">
								<div class="flex align-center cursor-pointer" @click="moreClick" v-if="searchLenth > 3">
									高级查询
									<div class="margin-right-xl more-ico margin-left" :class="isMore ? 'rotate-90' : ''">
										<el-icon>
											<ArrowDown />
										</el-icon>
									</div>
								</div>
								<el-button icon="Search" type="primary" class="btn-bg-blue margin-right" size="large" @click="search">查询</el-button>
								<!-- <el-button type="primary" class="btn-bg-blue margin-right" size="large" @click="reset">重置</el-button> -->
							</div>
						</template>
					</lay-json-schema-form>
				</div>
				<slot name="btnSlot" />
			</div>

			<!-- <div class="flex align-center existence-search-box">
				已选条件：
				<template v-for="(tag, index) of tagData" :key="`tag-${index}`">
					<lay-tag color="#edeffc" size="lg" closable @close="handleClose(tag, index)" style="margin-right: 5px">
						<span class="text-blue">{{ tag.lable }}:{{ tag.value }}</span>
					</lay-tag>
				</template>
				<lay-tag size="lg" style="margin-right: 5px" v-if="tagData.length == 0">
					<span>暂无搜索条件</span>
				</lay-tag>
			</div> -->
		</div>
		<div class="search-bg" v-if="isMore" @click="moreClick"></div>
	</div>
</template>

<style lang="scss" scoped>
	.search-bg {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 997;
	}

	.search-box {
		padding: 15px;
		position: relative;
		height: 70px;
		margin-bottom: 10px;

		.serch-from {
			// padding: 20px 10px 10px 6px;
			// position: absolute;
			// left: 0;
			// top: 0;
			// right: 0;
			// z-index: 999;
			// transition: all 0.3s ease;
			// overflow: hidden;
		}

		.existence-search-box {
			height: 30px;
			position: absolute;
			bottom: 15px;
			padding-left: 30px;
			z-index: 998;
		}

		.more-ico {
			transition: all 0.3s ease;
			transform: rotate(0);
		}

		.rotate-90 {
			transform: rotate(180deg);
		}
	}
</style>